@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';
@import '@/styles/card.scss';

// 重置默认样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: $font-family;
  font-size: $font-size-base;
  color: $text-color;
  background-color: $bg-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
}

// 通用类
.text-primary {
  color: $primary-color;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-danger {
  color: $danger-color;
}

.text-info {
  color: $info-color;
}

.bg-primary {
  background-color: $primary-color;
}

.bg-success {
  background-color: $success-color;
}

.bg-warning {
  background-color: $warning-color;
}

.bg-danger {
  background-color: $danger-color;
}

.bg-info {
  background-color: $info-color;
}

// flex布局工具类
.flex {
  display: flex;
}

.flex-center {
  @include flex(row, center, center);
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.width-full {
  width: 100%;
}

.flex-column {
  @include flex(column);
}

// 间距工具类
.m {
  &t {
    &-1 {
      margin-top: $spacing-xs;
    }
    &-2 {
      margin-top: $spacing-sm;
    }
    &-3 {
      margin-top: $spacing-md;
    }
    &-4 {
      margin-top: $spacing-lg;
    }
  }
  &b {
    &-1 {
      margin-bottom: $spacing-xs;
    }
    &-2 {
      margin-bottom: $spacing-sm;
    }
    &-3 {
      margin-bottom: $spacing-md;
    }
    &-4 {
      margin-bottom: $spacing-lg;
    }
  }
  &r {
    &-1 {
      margin-right: $spacing-xs;
    }
    &-2 {
      margin-right: $spacing-sm;
    }
    &-3 {
      margin-right: $spacing-md;
    }
    &-4 {
      margin-right: $spacing-lg;
    }
    &-6 {
      margin-right: $spacing-xl;
    }
  }
  &l {
    &-1 {
      margin-left: $spacing-xs;
    }
    &-2 {
      margin-left: $spacing-sm;
    }
    &-3 {
      margin-left: $spacing-md;
    }
    &-4 {
      margin-left: $spacing-lg;
    }
  }
}

// margin工具类
.mb-1 {
  margin-bottom: $spacing-xs;
}
.mb-2 {
  margin-bottom: $spacing-sm;
}
.mb-3 {
  margin-bottom: $spacing-md;
}
.mb-4 {
  margin-bottom: $spacing-lg;
}
.mb-6 {
  margin-bottom: $spacing-xl;
}

.mr-1 {
  margin-right: $spacing-xs;
}
.mr-2 {
  margin-right: $spacing-sm;
}
.mr-3 {
  margin-right: $spacing-md;
}
.mr-4 {
  margin-right: $spacing-lg;
}
.mr-6 {
  margin-right: $spacing-xl;
}

// 间隙类
.gap-1 {
  gap: $spacing-xs;
}
.gap-2 {
  gap: $spacing-sm;
}
.gap-3 {
  gap: $spacing-md;
}
.gap-4 {
  gap: $spacing-lg;
}

.p {
  &t {
    &-1 {
      padding-top: $spacing-xs;
    }
    &-2 {
      padding-top: $spacing-sm;
    }
    &-3 {
      padding-top: $spacing-md;
    }
    &-4 {
      padding-top: $spacing-lg;
    }
  }
  &b {
    &-1 {
      padding-bottom: $spacing-xs;
    }
    &-2 {
      padding-bottom: $spacing-sm;
    }
    &-3 {
      padding-bottom: $spacing-md;
    }
    &-4 {
      padding-bottom: $spacing-lg;
    }
  }
}

// 文本工具类
.text-ellipsis {
  @include text-ellipsis;
}

.text-ellipsis-2 {
  @include multi-line-ellipsis(2);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

// 阴影工具类
.shadow {
  &-sm {
    @include box-shadow(1);
  }
  &-md {
    @include box-shadow(2);
  }
  &-lg {
    @include box-shadow(3);
  }
}

// 圆角工具类
.rounded {
  &-sm {
    border-radius: $border-radius-sm;
  }
  &-md {
    border-radius: $border-radius;
  }
  &-lg {
    border-radius: $border-radius-lg;
  }
  &-full {
    border-radius: 9999px;
  }
}

// 全局padding类
.p-0 {
  padding: 0;
}

.p-1 {
  padding: $spacing-xs;
}

.p-2 {
  padding: $spacing-sm;
}

.p-3 {
  padding: $spacing-md;
}

.p-4 {
  padding: $spacing-lg;
}

.px-1 {
  padding-left: $spacing-xs;
  padding-right: $spacing-xs;
}

.px-2 {
  padding-left: $spacing-sm;
  padding-right: $spacing-sm;
}

.px-3 {
  padding-left: $spacing-md;
  padding-right: $spacing-md;
}

.px-4 {
  padding-left: $spacing-lg;
  padding-right: $spacing-lg;
}

.py-1 {
  padding-top: $spacing-xs;
  padding-bottom: $spacing-xs;
}

.py-2 {
  padding-top: $spacing-sm;
  padding-bottom: $spacing-sm;
}

.py-3 {
  padding-top: $spacing-md;
  padding-bottom: $spacing-md;
}

.py-4 {
  padding-top: $spacing-lg;
  padding-bottom: $spacing-lg;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

// 文本大小类
.text-sm {
  font-size: $font-size-sm;
}

.text-base {
  font-size: $font-size-base;
}

.text-lg {
  font-size: $font-size-lg;
}

.text-xl {
  font-size: $font-size-xl;
}

// 字重类
.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

// 其他布局工具类
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

// 文本颜色
.text-gray-500 {
  color: $text-color-light;
}

.text-gray-600 {
  color: $text-color-secondary;
}

.border-r {
  border-right: 1px solid $border-color;
}

// 鼠标样式
.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

// 文本换行控制
.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

// 宽度类
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-50 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.mt-20 {
  margin-top: 20px;
}

.mt-15 {
  margin-top: 15px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}
